<!DOCTYPE html>
<html xmlns:color="http://www.w3.org/1999/xhtml" xmlns:font-size="http://www.w3.org/1999/xhtml">
<head lang="zh">
    <meta charset="UTF-8">
    <!--UTF-8中文-->
    <title>Bootstrap 学习实例</title>

    <meta content="课程教学实例" name="Description">
    <meta content="bootstrap 前端学习 css" name="Keywords">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="renderer" content="webkit"><!--360默认为极速模式打开-->

    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!--导航-->
<nav>
   <nav class="navbar  navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
       <div class="container">

       <ul class="nav">
           <li class="active">
               <a href="./index.html">首页</a>
           </li>
           <li><a href="./getting-started.html">起步</a></li>
           <li><a href="#">脚手架</a></li>
           <li><a href="#">基本CSS样式</a></li>
           <li><a href="#">组件</a></li>
           <li><a href="#">JavaScript</a></li>
           <li><a href="#">定制</a></li>
           <li><a href="#">网站实例</a></li>
       </ul>
       </div>
  </div>
  </nav>
</nav>
<!--页头-->
<header>
    <div class="container" style="text-align: center">
        <h1 style="margin-top: 137px">Bootstrap</h1>
        <h3><p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p></h3>

        <div  class="btn btn-large btn-primary" style="margin-top: 20px">
            下载Bootstrap
        </div>
        <div style="margin-top:40px">
            <a href="#" style="margin-left:20px; color:#DDDDDD">GitHub project</a>
            <a href="#" style="margin-left:20px; color:#DDDDDD">案例</a>
            <a href="#" style="margin-left:20px; color:#DDDDDD">扩展</a>
            <span style="margin-left:20px; color:#DDDDDD">Version 2.3.2</span>
        </div>
    </div>
</header>


<!--正文-->
<article>
    <div class="container" style="text-align: center">
        <div class="row">
            <div class="span12" style="margin-top: 35px">
                <a href="#">Bootstrap v3 中文文档</a>
            </div>
        </div>
     <div class="row">
         <div class="span12">
             <h1 style="margin-top: 60px">Bootstrap介绍。</h1>
             <p>需要为爱上Bootstrap找N多理由吗？ 就在眼前。</p>

        </div>
       <div class="span4">
               <img src=".\img\bs-docs-twitter-github.png" />
               <h3 style="color: dimgray;">我为人人，人人为我。</h3>
               <p>
                   由
                   <a href=#">@mdo</a>
                   和
                   <a href="#">@fat </a>
                   在Twitter工作时创建，Bootstrap使用
                   <a href="#">LESS CSS</a>
                   并用
                   <a href="#"> Node</a>
                   编译，托管在
                   <a href="#"> GitHub</a>
                   上，方便大家使用这一框架构建更好的web应用。
               </p>

       </div>
         <div class="span4">
             <img src=".\img\bs-docs-responsive-illustrations.png" />
             <h3 style="color: dimgray;">任何人都可以使用。</h3>
             <p>
                 Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。
                 在平板电脑和智能手机上面还有
                 <a href="#">响应式CSS</a>
                 可以使用。
             </p>

         </div>
         <div class="span4">
             <img src=".\img\bs-docs-bootstrap-features.png" />
             <h3 style="color: dimgray;">丰富的特色。</h3>
             <p>
                 12列的响应式
                 <a href="#">栅格结构</a>、丰富的组件、<a href="#">JavaScript插件</a>、排版、表单控件，
                 还有
                 <a href="#">基于web的定制工具</a>。
             </p>

         </div>


         <div class=row">
             <div class="span12">
                 <h1 style="margin-top: 60px">基于Bootstrap构建的网站。</h1>
                 <p>更多基于Bootstrap构建的网站列表，请访问
                     <a href="#">优站精</a>
                     或者
                     <a href="#">看看下面的几个案例</a>。</p>

             </div>
             <div class="span3">
                 <a href="#">
                     <img src=".\img\f9c2f01fad1f23574156e0577a06c.jpg" />
                 </a>
             </div>
             <div class="span3">
                 <a href="#">
                     <img src=".\img\2b88de566722366fffbb12ca7803a.jpg" />
                 </a>
             </div>
             <div class="span3">
                 <a href="#">
                     <img src=".\img\8ac1e8d1c0bd6f8312afbacc52750.jpg" />
                 </a>
             </div>
             <div class="span3">
                 <a href="#">
                     <img src=".\img\94a9c497c47468f8654ecab841247.jpg" />
                 </a>
             </div>
         </div>
         </div>
</article>
    <!--页脚-->
    <footer>
        <div class="container" style="margin-top:41px;text-align: center">
          <div>
            <p>
                Designed and built with all the love in the world
                <a href="#">@mdo</a>
                and
                <a href="#">@fat</a>.
            </p>
            <p>Code licensed under
                <a href="#">Apache License v2.0,</a>
                documentation under
                <a href="#">CC BY 3.0</a>.
            </p>
            <p>
                <a href="#">Glyphicons Free</a>
                licensed under
                <a href="#">CC BY 3.0.</a>
            </p>
              <p>
                  <a href="#" style="margin-left:20px">Blog</a>
                  <a href="#" style="margin-left:20px">Issues</a>
                  <a href="#" style="margin-left:20px">Changelog</a>
              </p>
          </div>
        </div>
    </footer>

<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>

<script src="//cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</body>
</html>